<style lang="less">
  .order-profit-statistics {
    .statistics{
      display: inline-block;
      white-space: nowrap;
      padding: 2px 5px;
      height: 28px;
      line-height: 28px;
      span{
        color: orange;
      }
    }
    .grid-content {
      border: 1px solid #d1dbe5;
      border-radius: 4px;
      min-height: 155px;
      padding: 10px 10px 0px 10px;
    }
    .bg-purple {
      background: #f2f2f2;
      .el-row {
        margin-bottom: 5px;
      }
      .bg-purple-header {
        font-size: 16px;
      }
    }
  }
</style>

<template>
  <div class="order-profit-statistics">
    <ue-search-bar  v-if="type === 'order'" ref="ueSearchBar" v-model="searchCondition" :data="querys">
    </ue-search-bar>
    <search-bar more-display v-if="type === 'truckLoadOrder'">
      <el-row :span="24">
        <el-col :span="8">
          <el-form-item label="客户名称">
            <el-input v-model="truckLoadSearchFilters['LIKE_truckLoadOrder.mebPersonalName']"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单编号">
            <el-input v-model="truckLoadSearchFilters['LIKE_truckLoadOrder.truckLoadNumber']"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单状态">
            <el-select v-model="truckLoadSearchFilters['EQ_truckLoadOrder.status']">
              <el-option v-for="item in $store.getters.CARLOAD_ORDER"
                         :label="item.cnDictValname"
                         :key="item.dictVal"
                         :value="item.dictVal"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :span="24">
        <el-col :span="8">
          <el-form-item label="下单日期">
            <el-date-picker type="daterange"  v-model="createdDate" style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="装车日期">
            <el-date-picker type="daterange"  v-model="loadingTime" style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="签收日期">
            <el-date-picker type="daterange"  v-model="unloadTime" style="width: 100%;">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
        <el-row :span="24">
        <el-col :span="8">
          <el-form-item label="发货人">
            <el-input v-model="truckLoadSearchFilters['LIKE_truckLoadOrder.startContactName']"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发货人手机">
            <el-input v-model="truckLoadSearchFilters['LIKE_truckLoadOrder.startContactPhone']"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发货地址">
            <el-input v-model="truckLoadSearchFilters['LIKE_truckLoadOrder.startContactAddressNames']"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :span="24">
        <el-col :span="8">
          <el-form-item label="收货人">
            <el-input v-model="truckLoadSearchFilters['LIKE_truckLoadOrder.endContactName']"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收货人手机">
            <el-input v-model="truckLoadSearchFilters['LIKE_truckLoadOrder.endContactPhone']"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收货地址">
            <el-input v-model="truckLoadSearchFilters['LIKE_truckLoadOrder.endContactAddressNames']"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </search-bar>
    <el-col :span="24" style="margin-bottom: 10px">
      <el-button type="primary" @click="exportExcel">导出</el-button>
      <el-button type="primary" style="float: right" @click="resetSeachCondition">重置</el-button>
      <el-button type="primary" style="float: right" @click="query">查询</el-button>
    </el-col>
    <!--列表-->
    <el-table :data="tableData" max-height="600"
              v-loading="listLoading" v-if="type === 'order'"
              highlight-current-row border style="width: 100%;">
      <el-table-column label="订单编号" width="145">
        <template slot-scope="scope">
          <a  style="cursor: pointer;text-decoration:underline;color: #20a0ff" @click="openDialog(scope.row.order.id,scope.row.order.orderNumber)">
            {{scope.row.order.orderNumber}}
          </a>
        </template>
      </el-table-column>
      <el-table-column label="日期" width="265" >
        <template slot-scope="scope">
          <div>下单时间 {{scope.row.order.createDate}}</div>
          <div>发运日期 {{scope.row.order.shipmentsDate}}</div>
          <div>发车日期 {{scope.row.departureDate}}</div>
          <div>签收日期 {{scope.row.signOffDate}}</div>
        </template>
      </el-table-column>
      <el-table-column label="客户名称" width="120">
        <template slot-scope="scope">
          <div>{{scope.row.order.memberUserName}}</div>
        </template>
      </el-table-column>
      <slot>
      </slot>
      <el-table-column label="订单金额(元)" width="120">
        <template slot-scope="scope">
          <div>{{scope.row.order.agingName}}</div>
          <div style="color: #ff4949;">{{scope.row.order.orderPrice}} 元</div>
          <div style="color: #ff4949;">{{scope.row.order.payStatusName}}</div>
        </template>
      </el-table-column>
      <el-table-column label="收益金额(元)" width="120">
        <template slot-scope="scope">
          <div>{{scope.row[profit]}}</div>
        </template>
      </el-table-column>
      <el-table-column label="结算方式" width="100">
        <template slot-scope="scope">
          <div>{{scope.row.order.paymentTypeName}}</div>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" width="100">
        <template slot-scope="scope">
          <div style="color: #13ce66">
            <div>{{scope.row.order.orderStatusName}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="发货人信息" width="225">
        <template slot-scope="scope">
          <div>{{scope.row.order.shipmentsContactName}}</div>
          <div>{{scope.row.order.shipmentsContactPhone}} {{scope.row.order.shipmentsTelephone}}</div>
          <div>{{scope.row.order.shipmentsAddress}}</div>
        </template>
      </el-table-column>
      <el-table-column label="收货人信息" width="225">
        <template slot-scope="scope">
          <div>{{scope.row.order.sendContactName}}</div>
          <div>{{scope.row.order.sendContactPhone}} {{scope.row.order.sendTelephone}}</div>
          <div>{{scope.row.order.sendAddress}}</div>
        </template>
      </el-table-column>
      <el-table-column label="货物信息" min-width="100">
        <template slot-scope="scope">
          <div>{{scope.row.order.cargoNames}}</div>
          <div>{{scope.row.order.amount}}件</div>
          <div>{{scope.row.order.weight.toFixed(2)}}吨</div>
          <div>{{scope.row.order.volume.toFixed(2)}}方</div>
        </template>
      </el-table-column>
    </el-table>

    <!--列表-->
    <el-table :data="tableData" max-height="600"
              v-loading="listLoading" v-if="type === 'truckLoadOrder'"
              highlight-current-row border style="width: 100%;">
      <el-table-column label="订单编号" width="145">
        <template slot-scope="scope">
          <a  style="cursor: pointer;text-decoration:underline;color: #20a0ff" @click="openTruckLoadOrderDialog(scope.row.truckLoadOrder.id, true)">
            {{scope.row.truckLoadOrder.truckLoadNumber}}
          </a>
        </template>
      </el-table-column>
      <el-table-column label="日期" width="265" >
        <template slot-scope="scope">
          <div>下单时间 {{scope.row.truckLoadOrder.createdDate}}</div>
          <div v-if="scope.row.truckLoadOrder.loadingTime !== null">装车日期 {{scope.row.truckLoadOrder.loadingTime}}</div>
          <div v-if="scope.row.truckLoadOrder.unloadTime !== null">签收日期 {{scope.row.truckLoadOrder.unloadTime}}</div>
        </template>
      </el-table-column>
      <el-table-column label="客户名称" width="120">
        <template slot-scope="scope">
          <div>{{scope.row.truckLoadOrder.mebPersonalName}}</div>
        </template>
      </el-table-column>
      <slot>
      </slot>
      <el-table-column label="订单金额(元)" width="120">
        <template slot-scope="scope">
          <div>商定车价:{{scope.row.truckLoadOrder.negotiatePrice}} 元</div>
          <div>司机车价:{{scope.row.truckLoadOrder.driverPrice}} 元</div>
          <div>信  息  费:{{scope.row.truckLoadOrder.infoPrice}} 元</div>
        </template>
      </el-table-column>
      <el-table-column label="收益金额(元)" width="120">
        <template slot-scope="scope">
          <div>{{scope.row[profit]}}</div>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" width="100">
        <template slot-scope="scope">
          <div style="color: #13ce66">
            <div>{{scope.row.truckLoadOrder.statusName}}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="发货人信息" width="225">
        <template slot-scope="scope">
          <div>{{scope.row.truckLoadOrder.startContactName}}</div>
          <div>{{scope.row.truckLoadOrder.startContactPhone}}</div>
          <div>{{scope.row.truckLoadOrder.startContactAddressNames}}</div>
        </template>
      </el-table-column>
      <el-table-column label="收货人信息" width="225">
        <template slot-scope="scope">
          <div>{{scope.row.truckLoadOrder.endContactName}}</div>
          <div>{{scope.row.truckLoadOrder.endContactPhone}}</div>
          <div>{{scope.row.truckLoadOrder.endContactAddressNames}}</div>
        </template>
      </el-table-column>
      <el-table-column label="车辆信息" min-width="100">
        <template slot-scope="scope">
          <div>{{scope.row.truckLoadOrder.trucksTypeName}}</div>
          <div>{{scope.row.truckLoadOrder.trucksLengthName}}米</div>
          <div v-if="scope.row.truckLoadOrder.loadTon !== null">{{scope.row.truckLoadOrder.loadTon}}吨</div>
          <div v-if="scope.row.truckLoadOrder.loadParty !== null">{{scope.row.truckLoadOrder.loadParty}}方</div>
        </template>
      </el-table-column>
      <el-table-column label="货物信息" min-width="100">
        <template slot-scope="scope">
          <div>{{scope.row.truckLoadOrder.cargoTypeName}}</div>
          <div>{{scope.row.truckLoadOrder.weight.toFixed(2)}}吨</div>
          <div>{{scope.row.truckLoadOrder.volume.toFixed(2)}}方</div>
        </template>
      </el-table-column>
    </el-table>
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <div class="statistics">
        统计：收益总额<span>{{staticstics[profit] || 0}}</span>元
      </div>
      <el-pagination
        :current-page="page"
        :page-size="size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentPageChange"
        layout="total,sizes,prev, pager, next, jumper"
        :total="total" style="float: right">
      </el-pagination>
    </el-col>
    <div>
    <order-track-detail ref="orderTrackDetail"></order-track-detail>
    <truck-load-order-select-dialog :truckLoadModel="truckLoadModel"></truck-load-order-select-dialog>
    </div>
  </div>
</template>

<script>
import {statistics, getTruckLoadOrderProfitLogsStatics, getAllTruckLoadOrderProfitLogs} from '../../api/order/OrderProfitLog';
import OrderTrackDetail from '../order/OrderTrackDetail.vue';
import TruckLoadOrderSelectDialog from '../truck_load_order/TruckLoadOrderSelectDialog.vue';
import {searchTruckLoadOrders} from '../../api/truck-load/TruckLoadOrder.js';

export default {
  name: 'OrderProfitStatistics',
  componentName: 'OrderProfitStatistics',
  props: {
    exportUrl: {
      type: String,
      required: true
    },
    filters: {
      type: String,
      default: ''
    },
    profit: {
      type: String,
      default: 'headquartersAmount'
    },
    type: {
      type: String,
      default: 'order'
    }
  },
  components: {
    TruckLoadOrderSelectDialog,
    OrderTrackDetail
  },
  data () {
    return {
      staticstics: {
      },
      truckLoadModel: '',
      createdDate: null,
      loadingTime: null,
      unloadTime: null,
      truckLoadSearchFilters: {
        'LIKE_truckLoadOrder.mebPersonalName': null,
        'LIKE_truckLoadOrder.truckLoadNumber': null,
        'EQ_truckLoadOrder.status': null,
        'GT_truckLoadOrder.createdDate': null,
        'LT_truckLoadOrder.createdDate': null,
        'GT_truckLoadOrder.loadingTime': null,
        'LT_truckLoadOrder.loadingTime': null,
        'GT_truckLoadOrder.unloadTime': null,
        'LT_truckLoadOrder.unloadTime': null,
        'LIKE_truckLoadOrder.startContactName': null,
        'LIKE_truckLoadOrder.startContactPhone': null,
        'LIKE_truckLoadOrder.startContactAddressNames': null,
        'LIKE_truckLoadOrder.endContactName': null,
        'LIKE_truckLoadOrder.endContactPhone': null,
        'LIKE_truckLoadOrder.endContactAddressNames': null
      },
      searchCondition: {
      },
      tableData: [],
      total: 0,
      page: 1,
      size: 10,
      listLoading: false
    };
  },
  computed: {
    btns () {
      return this.$store.state.btns['/settlement_platform/headquarters_profit_summary#default'] || [];
    },
    querys () {
      return this.$store.state.querys['/settlement_platform/headquarters_profit_summary#default'] || [];
    }
  },
  watch: {
    createdDate (val) {
      if (val) {
        this.truckLoadSearchFilters['GT_truckLoadOrder.createdDate'] = val[0].toJSON();
        this.truckLoadSearchFilters['LT_truckLoadOrder.createdDate'] = this.$ue.addDays(val[1], 1).toJSON();
      } else {
        this.truckLoadSearchFilters['GT_truckLoadOrder.createdDate'] = null;
        this.truckLoadSearchFilters['LT_truckLoadOrder.createdDate'] = null;
      }
    },
    loadingTime (val) {
      if (val) {
        this.truckLoadSearchFilters['GT_truckLoadOrder.loadingTime'] = val[0].toJSON();
        this.truckLoadSearchFilters['LT_truckLoadOrder.loadingTime'] = this.$ue.addDays(val[1], 1).toJSON();
      } else {
        this.truckLoadSearchFilters['GT_truckLoadOrder.loadingTime'] = null;
        this.truckLoadSearchFilters['LT_truckLoadOrder.loadingTime'] = null;
      }
    },
    unloadTime (val) {
      if (val) {
        this.truckLoadSearchFilters['GT_truckLoadOrder.unloadTime'] = val[0].toJSON();
        this.truckLoadSearchFilters['LT_truckLoadOrder.unloadTime'] = this.$ue.addDays(val[1], 1).toJSON();
      } else {
        this.truckLoadSearchFilters['GT_truckLoadOrder.unloadTime'] = null;
        this.truckLoadSearchFilters['LT_truckLoadOrder.unloadTime'] = null;
      }
    }
  },
  methods: {
    exportExcel () {
      if (this.type === 'order') {
        location.href = this.exportUrl + '?filters=' + this.filters + ';' + this.$ue.objToFilter(this.searchCondition);
      } else if (this.type === 'truckLoadOrder') {
        location.href = this.exportUrl + '?filters=' + this.filters + ';' + this.$ue.objToFilter(this.truckLoadSearchFilters);
      }
    },
    openDialog (orderId, orderNumber) {
      this.$refs.orderTrackDetail.show(orderId, orderNumber);
    },
    openTruckLoadOrderDialog (orderId, disabled) {
      searchTruckLoadOrders({
        filters: 'LIKE_id=' + orderId,
        sort: 'createdDate,desc',
        page: this.currentPage - 1,
        size: this.pageSize
      }).then((res) => {
        this.truckLoadModel = JSON.stringify(Object.assign(res.data[0], {
          'isShow': true,
          'isDisabled': disabled,
          'time': Math.random()
        }));
      });
    },
    resetSeachCondition () {
      if (this.type === 'order') {
        this.$refs.ueSearchBar.reset();
      } else if (this.type === 'truckLoadOrder') {
        for (let p in this.truckLoadSearchFilters) {
          if (this.truckLoadSearchFilters[p] instanceof Array) {
            this.truckLoadSearchFilters[p] = [];
          } else {
            this.truckLoadSearchFilters[p] = null;
          }
        }
        this.createdDate = null;
        this.loadingTime = null;
        this.unloadTime = null;
      }
    },
    query () {
      if (this.type === 'order') {
        statistics({
          filters: this.filters + ';' + this.$ue.objToFilter(this.searchCondition),
          sorts: '',
          page: this.page,
          size: this.size
        }).then(res => {
          if (res.data.successFlg) {
            this.tableData = res.data.detailModelList;
            this.total = res.data.totalCount;
            this.staticstics = res.data.obj;
          } else {
            this.$message.error(res.data.errorMsg);
          }
        });
      } else if (this.type === 'truckLoadOrder') {
        this.getPartnerTruckLoadOrderProfitDetail();
        this.getPartnerTruckLoadOrderProfitStatic();
      }
    },
    getPartnerTruckLoadOrderProfitDetail () {
      getAllTruckLoadOrderProfitLogs({
        filters: this.filters + ';' + this.$ue.objToFilter(this.truckLoadSearchFilters),
        sort: 'createdDate,desc',
        page: this.page - 1,
        size: this.size
      }).then((res) => {
        if (res.data) {
          this.tableData = res.data;
          this.total = Number(res.headers['x-total-count']);
        }
      });
    },
    getPartnerTruckLoadOrderProfitStatic () {
      getTruckLoadOrderProfitLogsStatics({
        filters: this.filters + ';' + this.$ue.objToFilter(this.truckLoadSearchFilters)
      }).then((res) => {
        if (res.data) {
          this.staticstics = res.data;
        }
      });
    },
    handleSizeChange (size) {
      this.size = size;
      this.query();
    },
    handleCurrentPageChange (page) {
      this.page = page;
      this.query();
    }
  },
  mounted () {
    this.query();
    this.$store.commit('initDict');
  }
};
</script>
